<template>
  <!-- BusinessInfo 工商信息 -->
  <PageContainer>
    <view class="business-info">
      <Header title="工商信息" :is-box-shadow="true" />
      <view class="basic-info">
        <view class="logo">
          <TImage :src="info?.logo" :width="logoSize" :height="logoSize" />
        </view>
        <view class="basic-info__right">
          <view class="name text-overflow-2">{{ info?.name }}</view>
          <view v-if="info?.percentileScore" class="score">{{ info?.percentileScore }}分</view>
        </view>
      </view>
      <view v-if="info?.tags && info.tags.length > 0" class="tag-list">
        <template v-for="(v, i) in getTags" :key="i">
          <text class="tag-item">{{ v }}</text>
        </template>
      </view>
      <TextItem type="uniline" label="企业类型" :value="info?.companyOrgType" />
      <TextItem type="uniline" label="行业" :value="info?.industry" />
      <view class="refresh marginBottom" @click="refresh">
        <text>数据来源:天眼查 {{ info?.forceTime }} 更新</text>
        <text class="ali-icon">&#xe8b9;</text>
      </view>
      <TextItem
        type="double"
        :label="['法定代表人', '注册资本']"
        :value="[info?.legalPersonName, info?.regCapital]"
        border-bottom="none"
      />
      <TextItem
        type="double"
        :label="['成立日期', '经营状态']"
        :value="[info?.estiblishTime, info?.regStatus]"
        border-bottom="none"
      />
      <view class="marginBottom"></view>
      <TextItem type="uniline" label="统一社会信用代码" :value="info?.creditCode" />
      <TextItem type="uniline" label="注册地址" :value="info?.regLocation" />
      <TextItem
        type="double"
        :label="['人员规模', '参保人数']"
        :value="[info?.staffNumRange, info?.socialStaffNum]"
        border-bottom="none"
      />
      <TextItem
        type="double"
        :label="['企业联系电话', '企业官网']"
        :value="[info?.phoneNumber, info?.websiteList]"
        border-bottom="none"
      />
      <view class="marginBottom"></view>
      <TextItem type="uniline" label="登记机关" :value="info?.regInstitute" />
      <TextItem type="uniline" label="业务主管单位" :value="info?.businessUnit" />
      <TextItem type="uniline" label="经营范围" :value="info?.businessScope" border-bottom="none" />
    </view>
  </PageContainer>
</template>

<script lang="ts" setup>
  /**  BusinessInfo  工商信息 */
  import PageContainer from '@/components/PageContainer/index.vue';
  import Header from '@/components/Header/index.vue';
  import { onLoad } from '@/router';
  import { tianyanchaDetailSnapshot } from '@/api';
  import { computed, ref } from 'vue';
  import { type TianyanchaDetailSnapshotResult } from '@/api/indexTypes';
  import TImage from '@/components/TImage/index.vue';
  import TextItem from './components/TextItem.vue';
  import { Toast } from '@/utils';

  const id = ref<number>();
  const info = ref<TianyanchaDetailSnapshotResult>();
  function getDetails(force?: true) {
    id.value &&
      tianyanchaDetailSnapshot(id.value, force).then((r) => {
        info.value = r.data;
        if (force) {
          isRefresh.value = true;
          Toast(r.msg);
        }
      });
  }

  const getTags = computed(() => {
    return info.value?.tags.split(';');
  });

  onLoad<'BusinessInfo'>((op) => {
    id.value = op.id;
    getDetails();
  });

  const logoSize = ref('120rpx');

  const isRefresh = ref(false);
  function refresh() {
    if (isRefresh.value) {
      Toast('今日已更新');
      return;
    }
    getDetails(true);
  }
</script>

<style lang="scss" scoped>
  .business-info {
    padding-bottom: 100rpx;
    .basic-info {
      padding: 30rpx;
      display: flex;
      align-items: center;
      background-color: #fff;
      .logo {
        width: v-bind(logoSize);
        height: v-bind(logoSize);
        flex-shrink: 0;
        overflow: hidden;
        margin-right: 20rpx;
      }
      &__right {
        flex: 1;
        height: v-bind(logoSize);
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        .name {
          font-size: 32rpx;
          color: #333;
          font-weight: bolder;
        }
        .score {
          font-size: 40rpx;
          color: #d09338;
        }
      }
    }
    .tag-list {
      padding-bottom: 30rpx;
      background-color: #fff;
      padding: 0 30rpx;
      padding-top: 16rpx;
      border-bottom: 1px solid #ddd;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      .tag-item {
        display: inline-block;
        white-space: nowrap;
        font-size: 24rpx;
        color: #808080;
        padding: 4rpx 18rpx;
        background-color: #f5f5f5;
        border: 1px solid #dddddd;
        border-radius: 100rpx;
        // margin: 0 10rpx;
        margin-right: 10rpx;
        margin-bottom: 20rpx;
      }
    }

    .refresh {
      font-size: 24rpx;
      color: #808080;
      padding: 26rpx 30rpx;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .ali-icon {
        font-size: 36rpx;
        color: #2878ff;
      }
    }
    .marginBottom {
      margin-bottom: 30rpx;
    }
  }
</style>
